<!-- 内容表现统计 -->
<template>
        <h2>内容表现统计</h2>
        <div class="toolbox">
                <!-- 搜索表单 -->
                <el-form :inline="true" :model="searchForm" class="search-form">
                        <el-form-item label="作者ID">
                                <el-input v-model="searchForm.authorId" placeholder="请输入作者ID" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="分类ID">
                                <el-input v-model="searchForm.categoryId" placeholder="请输入分类ID" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="内容ID">
                                <el-input v-model="searchForm.contentId" placeholder="请输入内容ID" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary" @click="handleSearch">搜索</el-button>
                                <el-button @click="resetSearch">重置</el-button>
                        </el-form-item>
                </el-form>

                <el-table :data="contentPerformanceDaily" style="width: 100%" border stripe v-loading="loading">
                        <el-table-column prop="id" label="编号" align="center"></el-table-column>
                        <el-table-column prop="statDate" label="日期" width="130" align="center">
                                <template #default="{ row }">
                                        {{ formatDate(row.statDate) }}
                                </template>
                        </el-table-column>
                        <el-table-column prop="authorName" label="作者名称" align="center"></el-table-column>
                        <el-table-column prop="categoryName" label="分类名称" align="center"></el-table-column>
                        <el-table-column prop="contentTitle" label="内容标题" align="center"></el-table-column>
                        <el-table-column label="操作" width="120" align="center">
                                <template #default="{ row }">
                                        <el-button type="primary" size="small" @click="showDetail(row)">详情</el-button>
                                </template>
                        </el-table-column>
                </el-table>

                <!-- 分页组件 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                        :current-page="currentPage" :page-sizes="[6, 10, 20, 50]" :page-size="pageSize"
                        layout="prev, pager, next,total, sizes " :total="totalCount">
                </el-pagination>

                <!-- 详情弹窗 -->
                <el-dialog v-model="detailVisible" title="内容表现详情" width="50%">
                        <el-descriptions :column="2" border>
                                <el-descriptions-item label="内容标题">{{ currentDetail.contentTitle
                                }}</el-descriptions-item>
                                <el-descriptions-item label="分类名称">{{ currentDetail.categoryName
                                }}</el-descriptions-item>
                                <el-descriptions-item label="作者名称">{{ currentDetail.authorName }}</el-descriptions-item>
                                <el-descriptions-item label="统计日期">{{ formatDate(currentDetail.statDate)
                                }}</el-descriptions-item>
                                <el-descriptions-item label="阅读量">{{ currentDetail.viewCount }}</el-descriptions-item>
                                <el-descriptions-item label="访客数">{{ currentDetail.uniqueViewers
                                }}</el-descriptions-item>
                                <el-descriptions-item label="点赞数">{{ currentDetail.likeCount }}</el-descriptions-item>
                                <el-descriptions-item label="评论数">{{ currentDetail.commentCount
                                }}</el-descriptions-item>
                                <el-descriptions-item label="分享数">{{ currentDetail.shareCount }}</el-descriptions-item>
                                <el-descriptions-item label="收藏数">{{ currentDetail.favoriteCount
                                }}</el-descriptions-item>
                                <el-descriptions-item label="平均阅读时长(秒)">{{ currentDetail.avgDuration
                                }}</el-descriptions-item>
                                <el-descriptions-item label="内容完读率(%)">{{ currentDetail.completionRate
                                }}</el-descriptions-item>
                        </el-descriptions>
                        <template #footer>
                                <el-button @click="detailVisible = false">关闭</el-button>
                        </template>
                </el-dialog>
        </div>
</template>

<script>
import axios from '@/utils/request';

export default {
        name: "ContentPerformanceDaily",
        data() {
                return {
                        loading: false,
                        contentPerformanceDaily: [],
                        currentPage: 1,
                        pageSize: 6,
                        totalCount: 0,
                        searchForm: {
                                contentId: '',
                                categoryId: '',
                                authorId: ''
                        },
                        detailVisible: false,
                        currentDetail: {
                                contentTitle: '',
                                categoryName: '',
                                authorName: '',
                                statDate: '',
                                viewCount: 0,
                                uniqueViewers: 0,
                                likeCount: 0,
                                commentCount: 0,
                                shareCount: 0,
                                favoriteCount: 0,
                                avgDuration: 0,
                                completionRate: 0
                        }
                }
        },
        created() {
                this.fetchData();
        },
        methods: {
                fetchData() {
                        this.loading = true;
                        const url = '/contentPerformanceDaily/daily/page';
                        const params = {
                                current: this.currentPage,
                                size: this.pageSize,
                                contentId: this.searchForm.contentId,
                                categoryId: this.searchForm.categoryId,
                                authorId: this.searchForm.authorId
                        };
                        axios.get(url, { params }).then(response => {
                                if (response.data && response.data.code === 200) {
                                        this.contentPerformanceDaily = response.data.data.records;
                                        this.totalCount = response.data.data.total;
                                        if (this.contentPerformanceDaily.length === 0) {
                                                this.$message.warning('没有查询到数据');
                                        }
                                } else {
                                        this.$message.error(response.data?.message || '获取行为统计失败');
                                }
                        }).catch(error => {
                                console.error('获取行为统计失败:', error);
                                this.$message.error('获取行为统计失败: ' + (error.response?.data?.message || error.message));
                        }).finally(() => {
                                this.loading = false;
                        });
                },
                handleSizeChange(val) {
                        this.pageSize = val;
                        this.currentPage = 1;
                        this.fetchData();
                },
                handlePageChange(val) {
                        this.currentPage = val;
                        this.fetchData();
                },
                handleSearch() {
                        this.currentPage = 1;
                        this.fetchData();
                },
                resetSearch() {
                        this.searchForm = {
                                contentId: '',
                                categoryId: '',
                                authorId: ''
                        };
                        this.currentPage = 1;
                        this.fetchData();
                },
                showDetail(row) {
                        this.currentDetail = { ...row };
                        this.detailVisible = true;
                },
                formatDate(date) {
                        if (!date) return '';
                        try {
                                const dateObj = typeof date === 'string' ? new Date(date) : date;
                                const year = dateObj.getFullYear();
                                const month = String(dateObj.getMonth() + 1).padStart(2, '0');
                                const day = String(dateObj.getDate()).padStart(2, '0');
                                return `${year}-${month}-${day}`;
                        } catch (e) {
                                return date;
                        }
                }
        }
}
</script>

<style scoped>
/* 内容表现统计样式 */
.toolbox {
        margin-bottom: 10px;
        justify-content: space-between;
        align-items: center;
}

.search-form {
        margin-bottom: 20px;
}
</style>